<template>
  <div class="app-container">
      <div id="line1" style="width: 100%;height:500px;"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data() {
    return {
      data: {
        legend_data: ["物料a", "物料b"],
        xAxis_data: ["2022/02/06", "2022/02/07", "2022/02/08", "2022/02/09", "2022/02/10", "2022/02/11", "2022/02/12", "2022/02/13", "2022/02/14", "2022/02/15"],
        series: [{
          id: "a",
          name: "物料a",
          type: "line",
          data: [100, 200, 300, 400, 500, 600, 500, 400, 300, 200],
        }, {
          id: "b",
          name: "物料b",
          type: "line",
          data: [200, 300, 400, 500, 600, 500, 400, 300, 200, 100],
        }]
      },
    }
  },
  mounted() {
    this.line1Echarts()
  },
  methods: {
    //生产数据折线图
    line1Echarts() {
      const line1Chart = this.$echarts.init(document.getElementById('line1'));
      line1Chart.clear();
      line1Chart.off('click') // 如果不加off事件，就会叠加触发
      const line1option = {
        tooltip: {
          triggerOn: "click",
          trigger: "item",
          formatter: (params) => {
            var color = params.color;
            var htmlStr ='<div>';
            htmlStr += params.name + '<br/>';
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            htmlStr += '采购量：'+params.value + '<br/>';
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            htmlStr += '采购入库：'+params.value + '<br/>';
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            htmlStr += '其他入库：'+params.value + '<br/>';
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            htmlStr += '出库：'+params.value + '<br/>';
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            htmlStr += '生产用量：'+params.value + '<br/>';
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            htmlStr += '安全库存：'+params.value + '<br/>';
            htmlStr += '</div>';
            return htmlStr;
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: this.data.legend_data,
          top: '95%',
          left: 'center'
        },
        series: this.data.series
      };
      line1Chart.on('click', (params) => {
        console.log(params);
      })
      line1Chart.setOption(line1option);
    },
  }
}
</script>
